<template>
    <div class="comment-message">
        <p class="comment-title">{{ disabled ? '服务评价' : '您对本次服务满意吗' }}</p>
        <el-rate v-model="value" size="large" :disabled="disabled" @change="handleRate" />
        <p class="comment-text">{{ texts[value - 1] }}</p>
        <div class="content-box">
            <div class="label-list">
                <div v-if="!disabled" :class="['label-cell', selectedLabel.includes(item.id) ? 'active' : '' ]" v-for="item in labelList" :key="item.id" @click="handleLabel(item)">
                    <span>{{ item.text }}</span>
                </div>
                <div v-else class="label-cell active" v-for="tags in params.tags.split(',')">
                    <span>{{ tags }}</span>
                </div>
            </div>
            <div class="option">
                <span>是否帮你解决了问题?</span>
                <el-radio-group v-model="option" v-if="!disabled">
                    <el-radio :label="0" size="small">是</el-radio>
                    <el-radio :label="1" size="small">否</el-radio>
                </el-radio-group>
                <el-link v-else type="primary" style="font-size: 12px;">{{ params.isResolve ? '是' : '否' }}</el-link>
            </div>
            <div class="question-content" v-if="!disabled && value != 0 && value < 4">
                <span>请写下您的问题</span>
                <el-input
                    v-model="textarea"
                    :rows="2"
                    type="textarea"
                    placeholder="请输入"
                />
            </div>
            <div class="question-content" v-if="disabled">我的问题：{{ params.remake }}</div>
            <div class="btn" v-if="!disabled && value != 0 && value < 4">
                <el-button size="small" type="primary" @click="submitForm">提交</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
    name: 'CommentMessage',
    props: {
        rate: {
            type: Number,
            default: 0
        },
        readonly: {
            type: Boolean,
            default: false
        },
        record_id: {
            type: [Number, String],
            required: true
        },
        params: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    setup(props, context) {
        const { rate, record_id, readonly, params } = toRefs(props)
        console.log(rate)
        const state = reactive({
            value: rate.value || 0,
            texts: ['很不满', '不满', '一般', '满意', '很满意'],
            disabled: readonly.value || false,
            labelList: [{ text: '态度敷衍', id: 1 }, { text: '让我反复描述', id: 2 }, { text: '描述难懂', id: 3 }, { text: '没解答疑问', id: 4 }, { text: '方案不行', id: 5 }, { text: '回复慢', id: 6 }],
            selectedLabel: [],
            option: 0,
            textarea: ''
        })
        const handleRate = (e) => {
            // TO DO 接入评分接口
            //  record_id
            //  state.disabled = true
        }
        const handleLabel = e => {
            const id = e.id
            const index = state.selectedLabel.findIndex(item => item == id)
            console.log(index)
            if(index < 0) {
                state.selectedLabel.push(id)
            }else{
                state.selectedLabel.splice(index, 1)
            }
            console.log(state.selectedLabel)
        }
        // 提交问题的表单
        const submitForm = () => {
            // TO DO 接入评分接口// TO DO 接入评分接口
            console.log(state.selectedLabel)
            console.log(state.option)
            console.log(state.textarea)
        }
        return {
            ...toRefs(state),
            handleRate,
            handleLabel,
            submitForm
        }
    }
} 
</script>
<style lang="scss" scoped>
.comment-message{
    width: 300px;
    background: white;
    box-shadow: 0 0 5px 0px #e8e4e4;
    padding: 10px;
    border-radius: 3px;
    transition: all 0.5s;

    &:hover {
        box-shadow: 0 0 5px 0px #cac6c6;
    }
    .comment-title{
        text-align: center;
        font-size: 15px;
        color: var(--el-text-color-primary);
    }
    :deep(.el-rate){
        justify-content: center;
        display: flex;
    }
    .comment-text{
        text-align: center;
        color: var(--el-text-regulary);
    }
    .label-list{
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        .label-cell{
            width: calc(100% / 3 - 5px);
            margin-right: 5px;
            padding: 5px;
            font-size: 12px;
            border-radius: 6px;
            border: 1px solid var(--el-border-color);
            margin-bottom: 10px;
            text-align: center;
            cursor: pointer;
            text-overflow: ellipsis;
	        overflow: hidden;
            white-space: nowrap;
            transition: .1s;
            &:nth-child(3n + 3){
                margin-right: 0;
            }
            &:hover{
                background: var(--el-color-primary);
                color: white;
                border-color: var(--el-color-primary);
            }
        }
        .active {
            background: var(--el-color-primary);
            color: white;
            border-color: var(--el-color-primary);
        }
    }
    .option{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        span{
            font-size: 12px;
        }
    }
    .question-content{
        padding: 0  5px;
        margin-top: 10px;
        font-size: 12px;
        span{
            display: block;
            margin-bottom: 10px;
        }
    }
    .btn{
        display: flex;
        justify-content: flex-end;
        padding-right: 5px;
        margin-top: 10px;
    }
    .content-box{
        margin-top: 10px;
    }
}
</style>